<template>
  <view class="uni-pages play">
    <view style="width: 750rpx;height: 450rpx;">
      <video v-if="detail.file_url" id="myVideo" @play="onPlay" @pause="onPause" autoplay page-gesture :src="detail.file_url"
             controls :show-center-play-btn="false" style="width: 750rpx;height: 450rpx;"></video>
    </view>
    <view class="detail-info2">
      <view class="course-title">{{ detail.name }}</view>
      <view style="display: flex;align-items: center;justify-content: space-between;margin-top: 20rpx">
        <view class="course-hour">简介：{{ detail.description || ''}}</view>
      </view>
    </view>
    <u-tabs-swiper v-if="detail" ref="tabs" active-color="rgb(61, 155, 246)" :bold="false" font-size="28" :list="tabs"
                   :current="currentIndex" @change="tabPageCurrentTabSelected" :is-scroll="false" swiperWidth="750">
    </u-tabs-swiper>
    <u-line></u-line>
    <scroll-view v-if="detail" scroll-y="auto" style="width: 750rpx;" @scrolltolower="reachBottom">
      <view class="bg-white" style="width: 750rpx;" v-show="currentIndex == i" v-for="(m, i) in tabs" :key="i">
        <view style="padding: 32rpx" v-show="m.id == 0">
          <u-collapse :accordion="false">
            <u-collapse-item :title="item.name" v-for="(item, index) in detailChapter" :key="index">
              <div style="padding: 5px 0px 0;">
                <div class="video-item" v-for="subItem in item.CourseItems" @click="changeVideo(subItem)">
                  <view :class="['name',detail.id === subItem.id? 'active' : '']">
                    <text class="tag">视频</text>
                    <text class="video-name">{{ subItem.name }}</text>
                  </view>
                  <view>
                    <u-image style="height: 10px" mode="heightFix" src="/static/play.gif" v-if="detail.id === subItem.id"></u-image>
                    <view v-else class="duration">{{ subItem.duration }}</view>
                  </view>
                </div>
              </div>
            </u-collapse-item>
          </u-collapse>
        </view>
        <view v-show="m.id == 1" style="padding: 32rpx">
          <u-parse class="margin-top-sm" :html="detail.content"></u-parse>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      detailChapter: [],
      currentIndex: 0,
      tabs: [{
        id: 0,
        name: '课程目录'
      }, {
        id: 1,
        name: '视频介绍'
      }],
    };
  },
  methods: {

    reachBottom() {
      if (this.currentIndex == 2) {
        if (this.commentList.length > 0 && this.loadStatus != 'nomore') {
          this.loadStatus = 'loading';
          // 模拟数据加载
          setTimeout(() => {
            this.getCommentList();
          }, 1000)
        }
      }
    },
    changeVideo(item) {
      console.log(item)
      this.detail = item
    },
    tabPageCurrentTabSelected(index) {
      const me = this;
      this.currentIndex = index;
      this.currentId = this.tabs[index].id;
      if (this.detail.is_open == 1) {
        if (index == 2) {
          this.listHeight = uni.upx2px(this.pageHeight) - uni.upx2px(100) - uni.upx2px(140);
        } else {
          this.listHeight = uni.upx2px(this.pageHeight) - uni.upx2px(100);
        }
      }
    },
    onPlayVideo(item) {
      this.detail = item
    },
    onPlay() {
      console.log('onPlay')
    },
    onPause() {
      console.log('onPause')
    }
  },
  onLoad({ courseId, chapterId, id }) {
    uni.showLoading({
      title: '加载中'
    });
    this.$api.getChapterList(courseId).then(res => {
      this.detailChapter = res
      if (chapterId) {
        let chapter = res.find(item => item.id == chapterId)
        if (!chapter) {
          chapter = res[0]
        }
        if (chapter) {
          if (id) {
            let item = chapter.CourseItems.find(item => item.id == id)
            if (!item) {
              item = chapter.CourseItems[0]
            }
            if (item) {
              if (item.type === 'video') {
                this.onPlayVideo(item)
              }
            }
          }

        }
      }
    }).finally(() => {
      uni.hideLoading();
    })
  }
};
</script>

<style lang="scss">
.play {
  .video-item {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 10px;
    line-height: 30px;
    box-sizing: border-box;
    padding-left: 5px;
    border-bottom: 1px dashed #efefef;
    .video-name {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 28rpx;
      color: rgba(51, 51, 51, .8);
      &.active {
        color: #ff4b4b !important;
        font-weight: 700 !important;
      }
    }
    .tag {
      padding: 2px 4px;
      background-color: #ff4b4b;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      color: #fff;
      font-size: 12px;
      margin-right: 5px;
    }
    .name {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      color: rgba(51, 51, 51, .8);
      &.active {
        color: #ff4b4b !important;
        font-weight: 700 !important;
      }
    }
    .duration {
      width: auto;
      height: auto;
      font-size: 12px;
      margin-left: 10px;
      color: #999;
      flex-shrink: 0;
    }
  }
  .detail-info2 {
    position: relative;
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30rpx 30rpx 20rpx 30rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    .course-title {
      font-size: 28rpx;
      font-weight: 800;
      color: #000;
    }
    .course-hour {
      margin: 8rpx 0 10rpx;
      color: #666666;
      font-size: 24rpx;
      line-height: 28rpx;
      white-space: nowrap;
    }
  }
}

</style>
